<template>
	<view class="order-page">
		<u-navbar title="订单详情" bgColor="rgba(255,255,255,0.0)" :auto-back="true" :placeholder="true">
		</u-navbar>
		<view class="content">
			<view class="box">
				<view class="title">
					<view>订单详情</view>
					<view class="tisp" v-if="info.orderStatus == '1'">
						等待打款
					</view>
					<view class="tisp" v-if="info.orderStatus == '2'">
						请5分钟内完成确定收款
					</view>
					<view class="tisp" v-if="info.orderStatus == '3'">
						已完成
					</view>
				</view>
				<view class="order">
					<image :src="info.goodsImgs" mode=""></image>
					<view class="order-right">
						<view class="right-head">
							<view class="order-name">
								{{info.goodsName}}
							</view>
						</view>
						<view class="specs">
							{{info.goodsGg}}
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="item">
					<view class="item-title">
						打款金额
					</view>
					<view class="price">
						￥{{info.skPrice}} (元)
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						订单日期
					</view>
					<view class="item-text">
						{{info.orderTime}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						订单号
					</view>
					<view class="item-text">
						<text>{{info.orderCode}}</text>
						<image src="../../../static/goods/copy.png" @click="gocory(info.orderCode)" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box" v-if="info.skType == 1">
				<view class="item">
					<view class="item-title">
						收款方式：微信
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						姓名：{{info.skName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						收款码：
					</view>
				</view>
				<view class="shot">
					<image class="image" @click="goeveimg(info.skUrl)" :src="info.skUrl" mode="widthFix"></image>
				</view>
			</view>
			<view class="box" v-if="info.skType == 2">
				<view class="item">
					<view class="item-title">
						收款方式：支付宝
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						姓名：{{info.skName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						收款码：
					</view>
				</view>
				<view class="shot">
					<image class="image" @click="goeveimg(info.skUrl)" :src="info.skUrl" mode="widthFix"></image>
				</view>
			</view>
			<view class="box" v-if="info.skType == 3">
				<view class="item">
					<view class="item-title">
						收款方式：USDT
					</view>
				</view>
				<view class="item">
					<view class="item-text">
						<text>{{info.skUrl}}</text>
						<image src="../../../static/goods/copy.png" @click="gocory(info.skUrl)" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box" v-if="info.skType == 4">
				<view class="item">
					<view class="item-title">
						收款方式：银行卡
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						姓名：{{info.skName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						银行：{{info.skBankType}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						开户行：{{info.skOpenBank}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						<text>卡号：{{info.skCardNo}}</text>
						<image src="../../../static/goods/copy.png" @click="gocory(info.skCardNo)" mode=""></image>
					</view>
				</view>
			</view>
			<view class="btn" v-if="info.orderStatus == '1'">
				<u-button size="large" type="primary" text="等待打款"
					color="linear-gradient( 90deg, #FE8A03 0%, #FA5900 100%)"></u-button>
			</view>
			<view class="btn" v-if="info.orderStatus == '2'" @click="goquer(id)">
				<u-button size="large" type="primary" text="确定收款"
					color="linear-gradient( 90deg, #FE8A03 0%, #FA5900 100%)"></u-button>
			</view>
			<view class="btn" v-if="info.orderStatus == '3'">
				<u-button size="large" type="primary" text="已完成"
					color="linear-gradient( 90deg, #FE8A03 0%, #FA5900 100%)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				upurl: '',
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getOrderinfo(e.id)
		},
		methods: {
			goquer(id) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否确定完成收款！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask:true
							})
							let params = {
								id: id,
							}
							app.$Request({
								method: 'GET',
								url: '/api/goods/shipping/verify',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 200) {
									app.getOrderinfo(id)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goeveimg(e) {
				let imgarr = []
				imgarr.push(e)
				uni.previewImage({
					urls: imgarr,
					current: imgarr[0]
				})
			},
			gocory(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			getOrderinfo(id) {
				let params = {
					id: id,
				}
				this.$Request({
					method: 'GET',
					url: '/api/goods/shipping/detail',
					data: params,
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.order-page {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.content {
			padding: 30rpx;

			.btn {
				margin-top: 50rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.box {
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
				margin-top: 30rpx;

				.title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tisp {
						color: red;
					}
				}

				.order {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					image {
						width: 140rpx;
						height: 140rpx;
					}

					.order-right {
						width: 75%;
						margin-left: 30rpx;

						.right-head {

							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #333333;

							.order-name {
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.specs {
							font-size: 24rpx;
							color: #666666;
							margin-top: 20rpx;
						}
					}
				}

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.item-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;

						image {
							width: 22rpx;
							height: 22rpx;
							margin-left: 20rpx;
						}
					}

					.item-text {
						font-size: 24rpx;
						color: #000;
						display: flex;
						align-items: center;

						image {
							width: 22rpx;
							height: 22rpx;
							margin-left: 20rpx;
						}
					}

					.price {
						color: #ff0000;
						font-size: 26rpx;
					}
				}

				.item:last-child {
					margin-bottom: 0;
				}

				.shot {
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.add {
						width: 70rpx;
						height: 70rpx;
						padding: 50rpx 0;
					}

					.image {
						width: 300rpx;
						height: 300rpx;
					}
				}
			}
		}
	}
</style>